// 1.导入一个path模块 ： 这个模块会自动从node的包里面找
// 2.运行 npm init              init：初始化
// 3.生成一个package.json文件，里面是当前项目的基本信息
// 4.运行 npm install
//如果项目里有依赖到node相关的东西，就需要建一个package.json
const path=require('path')


// 把入口和出口写在配置文件里，这样每次运行webpack就可以打包了
module.exports={
  // entry:入口
  entry:'./src/main.js',
  //output：出口
  output:{
  //  path模块有一个resolve函数，可以用来拼接两个路径
    // _dirname：是node里自带的全局变量，里面保存的是当前webpack.config.js文件的路径
    // (__dirname,'dist')是一个绝对路径
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
    // 默认情况下，webpack会将生成的路径直接返回给使用者，但我们程序是打包在dist文件夹下的，
    // 所以这里我们需要在路径下再添加一个dist/ , 新版本不需要
    // publicPath:'dist/'
  },
  module:{
    rules: [
      {
        //  /\.css$/i ： 正则表达式  匹配以.css结尾的文件
        test: /\.css$/i,
        // css-loader只负责将我们css文件进行加载，不负责解析，也不会将我们css中写的东西放到HTML里面将它生效
        // style-loader 将模块导出的内容作为样式并添加到 DOM 中
        // 使用多个loader时，是从右向左读
        use:  ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 以字节为单位指定文件的最大大小,我们test.png 49.61kb=406405.12bit
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式，直接用url-loader加载
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 130000,
              // img：文件要打包到的文件夹    name：获取图片原来的名字，放在该位置
              // hash:8 自动生成8位的hash值，目的是防止名字重复
              // ext：使用图片原理的扩展名
              // name:'img/[name].[hash:8].[ext]'   新版本不需要
            },
          },
        ],
      },
      {
        test: /\.js$/,
        // exclude：排除， node_modules或bower_components里的es6代码不需要转换
        // node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // 配置
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use: ['vue-loader']
      }
    ],
  },
  resolve:{
    // extensions:解决扩展名，为了可以省略不写扩展名
    extensions:['.js','.css','.vue'],
    // alias:别名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }
}


/*
*   你在cmd命名窗口和vsCode终端里运行webpack，用的都是全局webpack
*   你在package.json里的scripts（脚本）里，加"build": "webpack"——》再运行
*   npm run build, 优先用的就是本地的webpack
* */